<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <title>Document</title>
    <script src="../../vue.js"></script>
  </head>
  <body>
    <div id="app">
      <h1>今天天气很{{isHot?"炎热":"寒冷"}}</h1>
      <button v-on:click="changeWeather">点击改变天气</button>
    </div>
    <script>
      new Vue({
        el: "#app",
        data() {
          return {
            isHot: true,
             //原则上来说,在data中书写函数,并且是箭头函数,函数内的this是指向当前的vue实例对象
            //但是一旦写成了普通函数,则this指向全局window,严格模式下会指向null,都不是我们想要的
            //但是我们不会把函数书写在data中,1.必须书写箭头函数 2.函数和数据混杂在一起不容易维护(data就是为了写数据的)
            /* changeWeather() {
              console.log(this);
            }, */
          };
        },
        /* 
          methods选项中用来书写方法,比如事件回调函数,也有我们自己封装的函数等等
          methods中的方法已经被vue统一处理过了,vue控制methods中所有的方法的this指向当前的vue实例
          为什么要把methods方法的this指向vm实例呢?因为方法一般都是用来操作数据的,而数据都在vm实例上放
          methods中的方法也会全部的放在vm实例上,供我们使用
        */
        methods: {
          changeWeather() {
            this.isHot = !this.isHot;
          },
        },
      });
    </script>
  </body>
</html>
